@use '../shared/styles/utils';
@use '../shared/styles/properties';
@use '../shared/styles/normalize';
@use '../shared/styles/theme';

// normalize type
body {
	line-height: 1.4;
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

a.muted {
	color: var(--color-foreground);
}

a,
button:not([disabled]),
[tabindex]:not([tabindex='-1']) {
	&:focus {
		@include utils.focus();
	}
}

nav {
	margin-bottom: 1.6rem;
}

h1,
h2,
p {
	margin-top: 0;
}

h2 {
	font-size: 1.8rem;
	margin-top: 3.2rem;
	margin-bottom: 0.6rem;

	&:first-child {
		margin-top: 0;
	}
}

h3 {
	margin-top: 3.2rem;
	margin-bottom: 0.4rem;
	font-size: 1.6rem;
	font-weight: 600;
}

h4 {
	margin-top: 1rem;
	margin-bottom: 0.4rem;
	font-weight: normal;
}

footer {
	margin-top: 3.2rem;
}

.checkbox {
	cursor: pointer;
	position: relative;
	text-align: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
}

.checkbox-group {
	display: flex;
	align-items: center;
	flex-direction: row;

	span {
		display: inline-block;
		margin-left: 0.6rem;
		margin-right: 0.4rem;
	}
}

input[type='checkbox'] {
	position: relative;
	appearance: none;
	cursor: pointer;
	width: 2rem;
	height: 2rem;

	border: 1px solid var(--vscode-input-border);
	background-color: var(--vscode-checkbox-background);
	border-color: var(--vscode-checkbox-border);
	border-radius: 0.25rem;
	color: var(--vscode-checkbox-foreground);
	outline: none;
	margin-right: 0.5rem;
	vertical-align: middle;
	transition: border-color 0.1s ease-in-out;

	&::after {
		content: '';
		border: 0.2rem solid var(--vscode-checkbox-foreground);
		border-width: 0 0.2rem 0.2rem 0;
		position: absolute;
		top: 0.2rem;
		left: 0.6rem;
		height: 1.2rem;
		width: 0.6rem;

		opacity: 0;
		transform: rotate(0deg);
		transition: 0.2s ease-in-out;
	}

	&:checked {
		background-color: var(--vscode-checkbox-selectBackground);
		border-color: var(--vscode-checkbox-selectBorder);

		&::after {
			opacity: 1;
			transform: rotate(45deg);
		}
	}

	&:hover,
	&:focus {
		background-color: var(--vscode-checkbox-selectBackground);
		border-color: var(--vscode-focusBorder);
	}
}

label {
	vertical-align: middle;
	cursor: pointer;
}

p,
li {
	color: var(--color-foreground--65);
}

.t {
	&-desc {
		font-size: 1.4rem;
		color: var(--color-foreground);
	}

	&-feature {
		font-size: 1.4rem;
		color: var(--color-foreground--85);
		line-height: 2rem;
		max-width: 692px;
	}

	&-eyebrow {
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-foreground--50);
		margin: 0;
	}

	&-nowrap {
		white-space: nowrap;
	}
}

.h {
	&-space-half {
		margin-bottom: 0.65rem;
	}
}

gk-card p {
	margin: 0;
}

.welcome {
	padding: var(--gitlens-gutter-width);

	#version {
		color: var(--color-foreground);
		font-weight: 600;
	}

	&__header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.6rem;
		margin-bottom: 1.6rem;
	}

	&__brand {
		margin: 0;

		small {
			display: inline-block;
			font-size: 1.6rem;
			font-weight: 200;
			color: var(--color-foreground--50);
			transform: translateY(0.3rem);
			margin-left: 1rem;
		}
	}

	&__release {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 0;
	}

	&__main {
		// display: flex;
		// flex-direction: column;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content;
		gap: 1.6rem 3rem;
	}

	&__section {
		& + & {
			// border-top: 1px solid var(--vscode-editorWidget-border);
			padding-top: 0.5rem;
			max-width: 692px;
		}

		> *:last-child {
			margin-bottom: 0;
		}
	}

	&__gates {
		p:first-child {
			margin-bottom: 0.5rem;
		}

		p:last-child {
			margin-top: 0.5rem;
			margin-left: 2rem;
		}
	}

	&__preview {
		margin-left: 0.5rem;
		font-size: 1.1rem;
		font-weight: normal;
		text-transform: uppercase;
	}

	&__toolbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.6rem;
		justify-content: space-between;

		:last-child {
			flex: none;
		}
	}

	&__illustration {
		max-width: 69.2rem;
		width: calc(100% - 2rem);
		height: auto;
		margin: 0 1rem;
	}

	&__plus-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.6rem;
	}

	&__starting-nav {
		max-width: 69.2rem;
		container-type: inline-size;
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
	}

	&__views-nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 0.64rem 2rem;
		// width: min-content;
		margin: 0 1rem 1.3rem;

		> * {
			white-space: nowrap;
		}

		a {
			color: var(--color-foreground);
		}
		code-icon {
			margin-right: 0.8rem;
			color: var(--color-foreground--50);
			transform: translateY(0.2rem);
			vertical-align: text-bottom;
		}
	}

	&__resources-nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: 0.64rem 2rem;

		> * {
			white-space: nowrap;
		}

		h3 {
			grid-column: 1 / -1;
			// margin-bottom: -0.6rem;
		}

		a {
			// font-size: 1.4rem;
			color: inherit;
		}

		code-icon {
			color: var(--color-foreground--50);
			margin-right: 0.8rem;
		}
	}

	@media (min-width: 744px) {
		&__main {
			grid-template-columns: 3fr 2fr;
			grid-template-rows: min-content min-content min-content 1fr;
		}
		&__section {
			grid-column: 1;

			&:nth-child(3) {
				grid-column: 2;
				grid-row: 1 / 5;
				border-top: none;
				padding-top: 0;
			}
		}

		&__plus-cards {
			display: flex;
			flex-direction: column;
		}

		footer {
			margin-top: 0;
		}
	}

	@media (min-width: 880px) {
		&__main {
			grid-template-columns: 4fr 2fr;
		}
	}

	@media (min-width: 1200px) {
		margin: 0 auto;
		max-width: 1200px;
	}
}

.codicon {
	font-family: codicon;
	cursor: default;
	user-select: none;
}

.glicon {
	font-family: glicons;
	cursor: default;
	user-select: none;
}

body {
	&[data-repos='blocked'] [data-requires='repo'] {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&:not([data-repos='blocked']) [data-requires='norepo'] {
		display: none;
	}
}
